<script setup lang="ts">
  import { getorgList } from '@/api/syssetting';
  import { addCrda } from '@/api/archives';
  import { FormInstance, Message, Select } from '@arco-design/web-vue';
  const props = defineProps({
    visible: Boolean,
    isEdit: Boolean,
    editParam: Number,
  });
  const emit = defineEmits(['update:visible', 'refresh']);
  const close = () => {
    emit('update:visible', false);
  };
  const formRef = ref<FormInstance | null>(null);
  const formFields = ref({});
  // 使用ref来创建options数组的响应式引用
  const orgOptions = ref<Array<{
    value: string | number;
    label: string;
  }> | null>(null);
  const formData = reactive({
    room_name: '', //档案室名称 *
    room_number: '', //编号 *
    room_address: '', //位置 *
    room_org_id: '', //所属单位 *
  });
  onMounted(() => {
    fetchOrgData();
  });

  const handleSubmit = async () => {
    if (await formRef.value?.checkForm()) {
      Message.error('请正确填写表单！');
    } else {
      addCrda({
        ...formRef.value?.formModel,
      }).then((res) => {
        if (res.code == 200) {
          Message.success(res?.msg);
          emit('update:visible', false);
          emit('refresh');
        }
      });
    }
  };

  formFields.value = [
    {
      label: '编号',
      name: 'room_number',
      rules: [
        {
          required: true,
          message: '请输入',
          validateTrigger: ['blur'], // Arco 推荐触发方式
        },
      ],
      fieldProps: {
        placeholder: '请输入',
        allowClear: true,
        maxLength: 200,
        span: 12,
      },
    },
    {
      label: '档案室名称',
      name: 'room_name',
      fieldProps: {
        placeholder: '请输入',
        allowClear: true,
        maxLength: 50,
      },
      tooltip: '软件注册后，请不要随意修改档案室名称，这会导致需要重新注册',
      rules: [
        {
          required: true,
          message: '档案室名称不能为空',
          validateTrigger: ['input'], // Arco 推荐触发方式
        },
        {
          maxLength: 50,
          message: '不能超过50个字符',
          validateTrigger: ['input'],
        },
      ],
    },

    {
      label: '位置',
      name: 'room_address',
      rules: [
        {
          required: true,
          message: '请输入',
          validateTrigger: ['blur'], // Arco 推荐触发方式
        },
      ],
      fieldProps: {
        placeholder: '请输入',
        allowClear: true,
        maxLength: 200,
      },
    },
    {
      name: 'room_org_id',
      label: '所属单位',
      type: 'a-select',
      fieldProps: {
        placeholder: '请选择所属单位',
      },
      selectOptions: orgOptions,
    },
  ];
  const fetchOrgData = async () => {
    // 这里应该是API调用或其他数据源获取
    const orgdata = await getorgList();
    const filteredData = orgdata.data.list.map((item: any) => ({
      label: item.org_name,
      value: item.org_id,
    }));
    // 更新orgOptions.value为过滤后的数组
    orgOptions.value = filteredData;
  };
</script>
<script lang="ts">
  export default {
    name: 'crda',
  };
</script>

<template>
  <a-modal
    title="添加档案室"
    width="600px"
    :visible="visible"
    title-align="start"
    @Ok="handleSubmit"
    @cancel="close"
  >
    <pro-form
      ref="formRef"
      hiddenBtn
      :form-json="formFields"
      :form-data="formData"
    ></pro-form>
  </a-modal>
</template>

<style scoped lang="less"></style>
